<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
    	.content{
    		margin: 0 auto;
    		width: 940px;
    		padding-top: 25px;
    	}
    	body,html{
    		height: 100%;
    	}
    	.inside-content{
    		height: 87%;
    		width: 100%;
    	}
        .footer{
            text-align: right;
        }
        .close{
            text-decoration: none;
        }
        .login-link{
            float: right;
            padding-right: 20px;
        }
        .login-link a{
            text-decoration: none;
            color:#eee;
        }
        .login-link a:hover{
            text-decoration: underline;
            color:#1abc9c;
        }
    </style>
    <script type="text/javascript">
        var productid = null;
    	$(function(){
            alert(10)
            var href = location.href;
            var id = href.substring(href.lastIndexOf('#')+1);
            if(!isNaN(id)){
                alert(id);
            }

    		$("a").click(function(){
    			var page = $(this).attr("page");
                alert(page)
    			if(undefined == page){
                    if($(this).attr("href") == "#new-product"){
                        $("#new-product").modal('toggle');
                    }
    				return;
    			}
    			$(this).parent().parent().children("li").removeClass("active");
    			$(".inside-content").attr("src",page+".html");
    			$(this).parent().addClass("active");
    		});

            $("#new-product-add").click(function(){
                var name = $("#new-product-name").val();
                if(name == ""){
                    alert("请输入产品线名称！");
                    $("#new-product-name").focus();
                    return false;
                }
                location.reload();
                // $.ajax({
                //     url:'product/new.do',
                //     data:{name:name},
                //     success:function(){
                //         $("#myModal").hide();
                //     },
                //     error:function(){
                //         alert("Sorry 出错了，请稍后再试。。。");
                //     }
                // });
            });
            $('a[href="#newAPI"]').click(function(){
               productid = $(this).attr("productid");
            });
            $("#new-api-add").click(function(){
                var data = {};
                data.title = $("#new-api-name").val();
                data.resp = $("#new-api-resp").val();
                data.detail = $("#new-api-desc").val();

                if(data.title == ""){
                    alert("请输入API Title！");
                    $("#new-api-name").focus();
                    return false;
                }else if (data.resp == "") {
                    alert("请输入API 返回值!");
                    $("#new-api-resp").focus();
                    return false;
                };

                location.reload();

                // $.ajax({
                //     url:'api/new.do',
                //     data:data,
                //     success:function(){
                //         location.reload();
                //     },
                //     error:function(){
                //         alert("Sorry 出错了，请稍后再试。。。");
                //     }
                // });
            });
    	});
    </script>
</head>
<body>
	<div class="content ">
	<div class="row">
		<div class="span12">
			<div class="navbar navbar-inverse">
				<div class="navbar-inner">
                    <div class="login-link">
                        <a href="login.html">Login</a>
                        <a href="login.html">Logout</a>
                    </div>
					<div class="container">
						<div class="nav-collapse collapse">
		                  <ul class="nav">
		                    <li class="active"><a href="#main" page="main">Main</a></li>
		                    <li><a href="#apis" page="lapi">API Docs</a>
                                <ul>
                                    <li><a href="#apis" page="apis">Finance API >></a>
                                        <ul>
                                            <li><a href="#1">getUserBalance</a></li>
                                            <li><a href="#2">getUserAccountBalance</a></li>
                                            <li><a href="#3">getUserConpon</a></li>
                                            <a data-toggle="modal" href="#newAPI" class="btn btn-large" productid="1"><span class="fui-plus-16"></span> Add New</a>
                                        </ul>
                                    </li>
                                    <li><a href="#apis" page="apis">Beidou API</a></li>
                                    <li><a href="#apis" page="apis">UC API</a></li>
                                    <li><a href="#apis" page="apis">UC API</a></li>
                                    <li><a href="#apis" page="apis">UC API</a></li>
                                    <li><a href="#apis" page="apis">UC API</a></li>
                                    <li><a href="#apis" page="apis">UC API</a></li>
                                    <a data-toggle="modal" href="#myModal" class="btn btn-large"><span class="fui-plus-16"></span> Add New</a>
                                </ul>
                            </li>
		                    <li><a href="#">About Us</a></li>
							<li><a href="#comming_soon...">Comeing Soon...</a></li>
		                  </ul>
		                </div><!--/.Nav-collapse -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div >
		<iframe src="./main.html" class="inside-content" frameborder="0"></iframe>
	</div>
    <div class="footer">Powered By <i class="icon-star"></i>FC-star <a href="#" page="readme">Change Log</a></div>
	</div>

    <div id="myModal" class="modal hide fade in">
            <div class="modal-header">
              <a class="close" data-dismiss="modal">×</a>
              <h3>Add New Product Line</h3>
            </div>
            <div class="modal-body">
              <input type="text" id="new-product-name" name="pname" placeholder="Product Line Name" style="width:96%">
            </div>
            <div class="modal-footer">
              <a href="#" class="btn" data-dismiss="modal">Give Up</a>
              <a href="#" id="new-product-add" class="btn btn-primary">Save</a>
            </div>
    </div>

    <div id="newAPI" class="modal hide fade in">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Add New API</h3>
        </div>
        <div class="modal-body" style="max-height: 600px">
            <input type="text" id="new-api-name" name="aname" placeholder="API title goes here" style="width:96%">
            <textarea name="aresp" id="new-api-resp" style="min-height: 250px;width: 96%" placeholder="API response goes here"></textarea>
            <textarea name="adesc" id="new-api-desc" style="min-height: 60px;width: 96%" placeholder="API description goes here"></textarea>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Give Up</a>
            <a href="#" id="new-api-add" class="btn btn-primary">Save</a>
        </div>
    </div>
</body>
</html>